const path = require('path')
function resolve (dir) {
  // 返回绝对路径
  return path.join(__dirname, './', dir)
}
module.exports = {
  css: {
    loaderOptions: {
      // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
      // 因为 `scss` 语法在内部也是由 sass-loader 处理的
      // 但是在配置 `prependData` 选项的时候
      // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
      // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
      scss: {
        prependData: '@import "~@/styles/index.scss";'
      }
    }
  },
  // 链式调用
  chainWebpack: config => {
    config.module
      // 判断是否存在 svg 规则
      .rule('svg')
      // 不包含 src/assets/icons 路径的
      .exclude.add(resolve('src/assets/icons'))
      // 结束
      .end()

    config.module
      // 判断是否存在 icons 规则
      .rule('icons')
      // rule对象的 test 属性设置，返回rule对象
      .test(/\.svg$/)
      // 只包含 src/assets/icons 路径的
      .include.add(resolve('src/assets/icons'))
      .end()
      // rule 对象的 use 属性设置，返回Use<this>对象
      .use('svg-sprite-loader')
      // 如果要设置多个loader的话，需要设置不同的name，在map中，如果name相同，则会覆盖之前的值
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]' // 去掉 svg 这个图片加载不出来
      })
  }
}
